<template>
    <view>
        <view class="load" v-if="!load">
            <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
        </view>
        <block v-else>
            <view class="navBox">
                <topStatus></topStatus>
                <view class="nav_main">
                    <!-- <uni-icons type="left" color="#333" size="30" @click="goBack()"></uni-icons> -->
                    <view class="nav_tit">
                        乡村振兴馆
                    </view>
                    <!-- <uni-icons type="left" color="#333" size="30" style="opacity: 0;"></uni-icons> -->
                </view>
            </view>

            <view class="searchCell">
                <image src=" https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732240800513109.png"
                    class="searchimg">
                </image>
                <view class="scInp">
                    <input type="text" v-model="searchContent" placeholder="| 请输入振兴馆名称" placeholder-class="placname"
                        @blur="subblur" />
                </view>
                <view class="scBtnBox">
                    <view class="scSumBtn" @click="subSearch">搜索</view>
                </view>
            </view>


            <view class="loacl_box">
                <view class="loacl_titbox">
                    <view class="ltBox ltLeft">
                        <view class="ltlTitle">
                            <view class="ltlTitle_icon">
                                <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17329525852691481.png"
                                    mode="aspectFill"></image>
                            </view>
                            <view class="ltlTitle_name">
                                我的家乡
                            </view>
                        </view>

                        <view class="setHome_btn" v-if="!myHomeTown" @click="nav_to('/pages/store/myHome_set')">
                            设置我的家乡
                        </view>
                        <view class="my_home" v-else>
                            <view class="home_cell" @click="nav_to('/pages/store/myHome_set')">
                                <view class="home_titbox">
                                    <view class="home_titbox_tit">
                                        家乡：
                                    </view>
                                    <view class="home_titbox_name">
                                        {{ myHomeTown.Province + '·' || '--' }}
                                        {{ myHomeTown.Area || '--' }}
                                    </view>
                                </view>
                                <view class="home_btn">
                                    修改
                                </view>
                            </view>
                            <view class="home_cell">
                                <view class="home_titbox" v-if="myHomeTown.PlaceInfo && myHomeTown.PlaceInfo.PlaceName"  @click="nav_to('/pages/store/pa_detail?id=' + myHomeTown.PlaceInfo.ID)">
                                    <view class="home_titbox_tit">
                                        振兴馆：
                                    </view>
                                    <view class="home_titbox_name" style="max-width: 130rpx;">
                                        {{ myHomeTown.PlaceInfo.PlaceName || '暂未开放' }}
																				
                                    </view>
																		<!-- <view class="inlocal_btn" v-if="myHomeTown.PlaceInfo.PlaceName">第{{myHomeTown.PlaceInfo.Ranking}}名</view> -->
																		<view class="inlocal_btn">点击进入</view>
                                </view>
																
																<view class="home_titbox" v-else>
																    <view class="home_titbox_tit">
																        振兴馆：
																    </view>
																    
																    <view class="home_titbox_name" style="max-width: 200rpx;" >
																        暂未开放，敬请期待
																    </view>
																</view>

                            </view>
                        </view>
                    </view>
                    <view class="ltBox ltRight" @click="nav_to('/pages/store/loacalpaList')">
                        <view class="ltlTitle">
                            <view class="ltlTitle_icon">
                                <image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17395345235311366.png"
                                    mode="aspectFill"></image>
                            </view>
                            <view class="ltlTitle_name">
                                家乡热度排行榜
                            </view>
                        </view>
                        <view class="boxRankList">
                            <view class="rank_box" v-for="(item, index) in homeEntry" :key="item.ID">
                                <view class="rank_cell">
                                    <view class="rankNum">
                                        {{ index + 1 }}
                                    </view>
                                    <image :src="item.Banner" mode="aspectFill"></image>
                                </view>
                                <view class="rankTitle">{{ item.PlaceName }}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <block v-if="pa_list.length">
                    <view class="loacl_bg1" v-for="(item, index) in pa_list" :key="index"
                        @click="nav_to('/pages/store/pa_detail?id=' + item.ID)">
                        <view class="loacl_bg2">
                            <view class="loacl_imgbox">
                                <image class="loacl_img" mode="aspectFill" :src="item.Banner"></image>
                            </view>

                            <view class="loacl_shopbox">
                                <view class="loashopcont" v-for="(value, i) in item.MainProductList" :key="i"
                                    @click.stop="goDetail(value.ID)">
                                    <image class="lo_shopimg" mode="aspectFill" :src="value.Images.split(',')[0]">
                                    </image>
                                    <view class="lo_shopname hiddenText">{{ value.ProductName }}</view>
                                    <view class="lo_shopprice">
                                        <view class="lo_shopprice_price">
                                            <text class="lo_pricon">￥</text>{{ value.Price }}
                                        </view>
                                        <view class="lo_shopprice_pay">
                                            已售 {{ getPayCount(value.VirtualSellNum) || '0' }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="loacl_bg3">
                            <view class="loacl_tit">
                                {{ HomeTownText(item.PlaceName) }}
                            </view>
                            <view class="loacl_address">
                                {{ item.Province }} · {{ item.City }}
                            </view>
                        </view>
                    </view>
                </block>

                <EmptyBox class="nullbox" v-else text="未找到该场馆..."></EmptyBox>
								<BtmLogo></BtmLogo>				
            </view>
        </block>
    </view>
</template>

<script>
import topStatus from '@/components/topStatus/topStatus.vue';
export default {
    components: {
        topStatus
    },
    data() {
        return {
            load: false,
            PageIndex: 1,
            PageSize: 10,
            pa_list: [],
            isMore: true,
            searchContent: '',

            homeEntry: [],
            myHomeTown: ''
        };
    },
    onLoad() {
        this.init()
    },
    onShow() {
        this.GetMyHometown()
        this.getMyCartNum()
    },
    onReachBottom() {
        if (this.isMore) {
            this.PageIndex++;
            this.localList();
        }
    },
    methods: {
				HomeTownText(text){
					if(text.length>10){
						return text.slice(0, 9)+'...'
					}
					return text
				},
        getPayCount(item) {
            return item > 1000 ? (item / 1000).toFixed(1) + 'k' : item > 1000000 ? (item / 1000000).toFixed(1) + 'M' : item > 100000000 ? (item / 100000000).toFixed(1) : item
        },
        async init() {
            this.localList()
            this.UserLikeReport()
            this.GetMyHometown()
        },
        // 点击跳转详情
        goDetail(id) {
            this.nav_to(`/pages/shop/detail?id=${id}`)
        },
        async localList() {
            let res = await this.$api.post('Place/PageList', {
                PageIndex: this.PageIndex,
                PageSize: this.PageSize,
                PlaceName: this.searchContent,
            })
            if (res.code == 0) {
                this.pa_list = this.PageIndex == 1 ? res.data : this.pa_list.concat(res.data)
                this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
                this.load = true
            }
        },
        async UserLikeReport() {
            let res = await this.$api.post('Place/UserLikeReport', {
                PageIndex: 1,
                PageSize: 3,
            })
            if (res.code == 0) {
                this.homeEntry = res.data
            }

        },
        async GetMyHometown() {
            let res = await this.$api.post('Place/GetMyHometown')
            if (res.code == 0) {
                this.myHomeTown = res.data || false
                // this.myHomeTown = false
            }
        },
        subSearch() {
            this.PageIndex = 1
            // this.isSearch = true
            // this.searchLoding = true
            this.localList();
        },
        subblur() {
            this.PageIndex = 1
            // this.isSearch = true
            // this.searchLoding = true
            this.localList();
        },
    },
}
</script>
<style lang='scss'>
page {
    background: linear-gradient(159deg, #D13D19 0%, #A60C0A 100%);
}

.nullbox {
    view {
        color: #ccc !important;
    }
}

.navBox {
    .nav_main {
        padding: 0 14rpx;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
        color: #fff;

        .nav_tit {
            font-size: 36rpx;
            font-weight: bold;
            color: #fff;
        }
    }
}

.searchCell {
    width: 702rpx;
    height: 72rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 36rpx;
    margin: 0 auto;
    box-shadow: 0 0 4rpx #ccc;
    margin-bottom: 40rpx;

    .scIcon {
        margin-right: 16rpx;
    }

    .searchimg {
        width: 32rpx;
        height: 32rpx;
        margin-left: 32rpx;
    }

    .scInp {
        flex: 1;
        margin-left: 5rpx;

        >input {
            width: 100%;
            background: transparent;
            margin-left: 16rpx;
        }

        .placname {
            color: #999999;
            font-size: 28rpx;
            // margin-left: 16rpx;
        }
    }

    .scBtnBox {
        display: flex;
        // margin-left: auto;
        margin-right: 8rpx;

        .scSumBtn {
            padding: 13rpx 34rpx;
            background: #5d8bf8;
            border-radius: 32rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            &:last-child {
                margin-left: 20rpx;
            }
        }
    }
}

.loacl_box {
    width: 100%;
    padding-bottom: 100rpx;

    .loacl_titbox {
        width: 710rpx;
        margin: 0 auto;
        margin-bottom: 90rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .ltBox {
            width: 48%;
            height: 180rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            /* align-items: center; */
            border: 4rpx solid #f4d1b5;
            border-radius: 16rpx;
            padding: 16rpx 10rpx;
        }

        .ltLeft {
            .ltlTitle {

                display: flex;
                align-items: center;

                .ltlTitle_icon {
                    width: 34rpx;
                    height: 34rpx;
                    margin-right: 8rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .ltlTitle_name {
                    font-size: 28rpx;
                    font-weight: bold;
                    color: #FFDDAF;
                }
            }

            .my_home {

                .home_cell {
                    display: flex;
                    align-items: flex-end;

                    &:nth-child(2) {
                        margin-top: 22rpx;
                    }

                    .home_titbox {
                        display: flex;

                        view {
                            font-size: 22rpx;
                            color: #FFDDAF;
                        }

                        .home_titbox_tit {
                            font-weight: bold;
                        }

                        .home_titbox_name {
														max-width: 166rpx;
                            overflow: hidden;
                            /*超出部分隐藏*/
                            white-space: nowrap;
                            /*禁止换行*/
                            text-overflow: ellipsis;
                            /*省略号*/
														
                        }
												.inlocal_btn{
													margin-left: 6rpx;
													font-weight: 500;
													font-size: 22rpx;
													color: #ccc;
													text-decoration: underline;
												}
                    }

                    .home_btn {
                        margin-left: 6rpx;
                        padding: 0rpx 14rpx;
                        /* background: #5d8bf8; */
                        text-decoration: underline;
                        border-radius: 32rpx;
                        font-weight: 500;
                        font-size: 22rpx;
                        color: #ccc;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }

            }

            .setHome_btn {
                padding: 10rpx 26rpx;
                background: #5d8bf8;
                border-radius: 32rpx;
                font-weight: 500;
                font-size: 24rpx;
                color: #ffffff;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 22rpx;
            }
        }

        .ltRight {
            .ltlTitle {

                display: flex;
                align-items: center;

                .ltlTitle_icon {
                    width: 38rpx;
                    height: 34rpx;
                    margin-right: 6rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .ltlTitle_name {
                    font-size: 28rpx;
                    font-weight: bold;
                    color: #FFDDAF;
                }
            }

            .boxRankList {
                width: 100%;
                display: flex;

                .rank_box {
                    margin-top: 12rpx;
                    width: 33%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    .rankTitle {
                        font-size: 22rpx;
                        color: #FFDDAF;
                    }

                    .rank_cell {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        position: relative;

                        .rankNum {
                            position: absolute;
                            top: -15rpx;
                            left: -15rpx;
                            font-size: 22rpx;
                            color: #fff;
                            border-radius: 50%;
                            width: 30rpx;
                            height: 30rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background-color: #FFDDAF;
                        }

                        image {
                            width: 60rpx;
                            height: 50rpx;
                            border-radius: 8rpx;
                        }
                    }

                }
            }
        }
    }

    .loacl_bg1 {
        width: 710rpx;
        height: 726rpx;
        background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17329480413391424.png');
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 auto;
        margin-top: 58rpx;
        margin-bottom: 78rpx;
        // overflow: hidden;
        position: relative;
        // border-top:1px solid transprent;
        padding: 16rpx 12rpx;
        box-sizing: border-box;

        .loacl_bg2 {
            width: 684rpx;
            height: 694rpx;
            background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17329480587611347.png');
            background-size: cover;
            background-repeat: no-repeat;
            overflow: hidden;

            .loacl_imgbox {
                width: 652rpx;
                height: 300rpx;
                border-radius: 24rpx;
                border: 4rpx solid #FCD39B;
                // display: block;
                margin: 0 auto;
                margin-bottom: 16rpx;
                margin-top: 62rpx;

                .loacl_img {
                    width: 100%;
                    height: 100%;
                    border-radius: 24rpx;
                    background-color: purple;
                }
            }

            .loacl_shopbox {
                width: 652rpx;
                margin: 0 auto;
                display: flex;
                align-items: center;
                /* overflow-x: auto; */

                .loashopcont {
                    width: 212rpx;
                    height: 300rpx;
                    background: #FFFFFF;
                    border-radius: 8rpx;
                    text-align: center;
                    margin-right: 8rpx;

                    .lo_shopimg {
                        width: 212rpx;
                        height: 210rpx;
                        border-radius: 8rpx 8rpx 0rpx 0rpx;
                        background-color: skyblue;
                    }

                    .lo_shopname {
                        width: 196rpx;
                        margin: 0 auto;
                        font-size: 24rpx;
                    }

                    .lo_shopprice {
                        padding: 8rpx;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .lo_shopprice_price {
                            font-size: 28rpx;
                            font-weight: bold;
                            color: #5d8bf8;
                        }

                        .lo_shopprice_pay {
                            font-size: 18rpx;
                            color: #999;
                        }
                    }

                    .lo_pricon {
                        font-size: 24rpx;
                        color: #5d8bf8;
                    }
                }
            }
        }

        .loacl_bg3 {
            position: absolute;
            width: 434rpx;
            height: 120rpx;
            background-image: url('https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732948740015861.png');
            background-size: cover;
            background-repeat: no-repeat;
            top: -52rpx;
            left: 50%;
            transform: translateX(-50%);
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            view {
                color: #FFDDAF;
            }

            .loacl_tit {
                margin-top: -10rpx;
                font-size: 36rpx;
            }

            .loacl_address {
                font-size: 22rpx;
								width: 356rpx;
								overflow: hidden;  /*超出部分隐藏*/
								white-space: nowrap;  /*禁止换行*/
								text-overflow: ellipsis; /*省略号*/
								text-align: center;
            }
        }
    }
}
</style>